<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed  />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="userObj.photo" @click="$refs.inFn.click()"/>
          <input type="file" accept="image/gif,image/jpeg,image/*" v-show="false" ref="inFn" @change="inFile">
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="userObj.name" @click="isShowNameDialog=true"/>
      <van-cell title="性别" is-link :value="userObj.gender===1?'男':'女'" />
      <van-cell title="生日" is-link :value="userObj.birthday" @click="isShowBirth=true" />
    </van-cell-group>
    <van-dialog
      v-model="isShowNameDialog"
      title="修改名称"
      show-cancel-button
      :before-close="onNameDialogBeforeClose">
      <!-- 输入框 -->
      <van-field
        v-model.trim="userName"
        input-align="center"
        maxlength="7"
        placeholder="请输入名称"
        v-focus
      />
</van-dialog>
<van-popup v-model="isShowBirth" position="bottom" style="height: 50%" round>
      <!-- 日期选择控件 -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择出生日期"
        :min-date="minDate"
        :max-date="maxDate"
        :show-toolbar="true"
        @cancel="isShowBirth = false"
        @confirm="confirmFn"
      />
</van-popup>
  </div>
</template>

<script>
import { userProfileAPI, updatePhotoAPI, updateProfileAPI } from '@/api/user'
import { Notify, Toast } from 'vant'
import moment from 'moment'
export default {
  name: 'UserEdit',
  data () {
    return {
      isShowBirth: false,
      minDate: new Date(1996, 0, 1),
      maxDate: new Date(2099, 0, 1),
      currentDate: new Date(),
      userObj: {},
      isShowNameDialog: false,
      userName: ''
    }
  },
  async mounted () {
    const res = await userProfileAPI()
    this.userObj = res.data
    this.currentDate = new Date(this.userObj.birthday)
  },
  methods: {
    async confirmFn (val) {
      try {
        await updateProfileAPI({
          name: this.userObj.name,
          birthday: moment(val).format('YYYY-MM-DD')
        })
        this.userObj.birthday = moment(val).format('YYYY-MM-DD')
        this.isShowBirth = false
        Toast.success('生日修改成功')
      } catch (error) {
        Toast.fail('生日修改失败')
      }
    },
    async onNameDialogBeforeClose (action, done) {
      if (action === 'cancel') {
        done()
        return
      }
      if (!this.userName) {
        Notify({ type: 'warning', message: '名称不能为空!' })
        done(false)
      } else {
        await updateProfileAPI({
          userName: this.userName,
          birthday: this.userObj.birthday
        })
        this.userObj.name = this.userName
        this.userName = ''
        done()
      }
    },
    async inFile (e) {
      const { name, size } = e.target.files[0]
      const regexp = /\.(png|jpe?g|gif|svg|webp)$/ // 正则以什么格式结尾
      if (!regexp.test(name)) { // 正则以什么格式结尾
        Toast.fail('请选择图片上传')
        return
      }
      if (size / 1024 / 1024 > 2) { // 上传图片不能超过2M
        Toast.fail('上传的图片不能超过2M')
        return
      }
      const from = new FormData() // 创建表单对象
      from.append('photo', e.target.files[0]) // 给表单添加后台需要的字段
      const res = await updatePhotoAPI({ from }) // 调用接口上传
      this.userObj.photo = res.data.photo // 返回值赋值给头像
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
